<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>地图</title>
  <link rel="stylesheet" href="./assets/openLayers/theme/default/style.css">
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
    }

    .map {
      width: 90%;
      height: 90%;
    }
  </style>

</head>

<body>
  <div id="map" class="map"></div>
  <script src="./assets/openLayers/OpenLayers.js"></script>

  <script>
    var map;
    init();
    var tian_di_tu_satellite_layer = new ol.layer.Tile({
      title: "天地图卫星影像",
      source: new ol.source.XYZ({
        url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}'
      })
    });
    map.addLayer(tian_di_tu_satellite_layer);

    function init() {
      function getBaseLayer(layername, layer) {
        return new OpenLayers.Layer.XYZ(
          layername,
          [
            "http://t3.tianditu.com/DataServer?T=" + layer + "&X=${x}&Y=${y}&L=${z}",
            // "http://t0.tianditu.com/DataServer?T=" + layer + "&X=${x}&Y=${y}&L=${z}",
            // "http://t0.tianditu.com/DataServer?T=" + layer + "&X=${x}&Y=${y}&L=${z}",
            // "http://t0.tianditu.com/DataServer?T=" + layer + "&X=${x}&Y=${y}&L=${z}",
            // "http://t0.tianditu.com/DataServer?T=" + layer + "&X=${x}&Y=${y}&L=${z}",
            // "http://t0.tianditu.com/DataServer?T=" + layer + "&X=${x}&Y=${y}&L=${z}",
            // "http://t0.tianditu.com/DataServer?T=" + layer + "&X=${x}&Y=${y}&L=${z}",
            // "http://t0.tianditu.com/DataServer?T=" + layer + "&X=${x}&Y=${y}&L=${z}"

          ],
          {
            isBaseLayer: true,
            displayInLayerSwitcher: true
          }
        );
      };
      function getAnnoLayer(layername, layer, visiable) {
        return new OpenLayers.Layer.XYZ(
          layername,
          [
            "http://t0.tianditu.com/DataServer?T=" + layer + "&X=${x}&Y=${y}&L=${z}",
            "http://t0.tianditu.com/DataServer?T=" + layer + "&X=${x}&Y=${y}&L=${z}",
            "http://t0.tianditu.com/DataServer?T=" + layer + "&X=${x}&Y=${y}&L=${z}",
            "http://t0.tianditu.com/DataServer?T=" + layer + "&X=${x}&Y=${y}&L=${z}",
            "http://t0.tianditu.com/DataServer?T=" + layer + "&X=${x}&Y=${y}&L=${z}",
            "http://t0.tianditu.com/DataServer?T=" + layer + "&X=${x}&Y=${y}&L=${z}",
            "http://t0.tianditu.com/DataServer?T=" + layer + "&X=${x}&Y=${y}&L=${z}",
            "http://t0.tianditu.com/DataServer?T=" + layer + "&X=${x}&Y=${y}&L=${z}"

          ],
          {
            isBaseLayer: false,
            visibility: visiable,
            displayInLayerSwitcher: false
          }
        );
      };

      var baseLayers = ["vec_c", "img_w", "ter_c"];
      // var vecLayer = getBaseLayer("地图", baseLayers[0]);
      var imgLayer = getBaseLayer("影像", baseLayers[1]);
      // var terLayer = getBaseLayer("地形", baseLayers[2]);

      // var vecAnno = getAnnoLayer("地图标注", "cva_c", true);


      map = new OpenLayers.Map({
        div: "map",
        projection: "EPSG:4326",
        layers: [imgLayer],
        numZoomLevels: 20,
        center: [103.847, 36.0473],
        zoom: 4
      });
      map.addControl(new OpenLayers.Control.LayerSwitcher());
      map.addControl(new OpenLayers.Control.MousePosition());

      var wms = new OpenLayers.Layer.WMS(
        "省级行政区",
        "http://200.200.200.220:8080/geoserver/wms",
        {
          LAYERS: "pro",
          transparent: true
        },
        {
          singleTile: false,
          ratio: 1,
          isBaseLayer: false,
          visibility: true,
          yx: { 'EPSG:4326': true }
        }
      );
      // map.addLayer(wms);
      // map.addLayers([vecAnno]);
    }
  </script>

</body>

</html>